<!-- 配方历史 -->
<template>
  <div>
    <!-- 标题 -->
    <el-card class="content scrollbar">
      <el-form class="search ml20" :inline="true" label-suffix="：" size="mini">
        <el-form-item label="配方信息">
          <el-input
            v-model="search.formulas"
            clearable
            class="w280"
            placeholder="配方名称/编码/三方编码/助记码"
            @keyup.enter.native="getList('search')"
          />
        </el-form-item>

        <el-form-item label="版本号">
          <el-input
            v-model="search.versionNo"
            clearable
            class="w280"
            placeholder="请输入版本号"
            @keyup.enter.native="getList('search')"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="getList('search')">确认
          </el-button>
          <el-button @click="searchReset">重置
          </el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="table"
        :data="list"
        size="small"
        :height="tableHeight"
        :cell-style="$style.cellStyle"
        :header-cell-style="$style.rowClass"
      >
        <ElTableColumn label="序号" type="index" width="50" />
        <ElTableColumn label="配方名称" prop="formulaName" />
        <ElTableColumn label="版本号" prop="versionNo" />
        <ElTableColumn label="药品编码" prop="drugCode" />
        <ElTableColumn label="三方编码" prop="drugThirdCode" />
        <ElTableColumn label="剂型种类" prop="medicamentTypeName" />
        <ElTableColumn label="创建时间" prop="createTime" />
        <ElTableColumn label="创建人" prop="createBy" />
        <ElTableColumn label="操作" width="220">
          <template slot-scope="{ row }">
            <el-button size="mini" @click="detailBtn('详情',row)">详情</el-button>

          </template>
        </ElTableColumn>
      </el-table>
      <pagination
        class="page tc mt10"
        :total="page.total"
        :page.sync="page.pageNum"
        :limit.sync="page.pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>

</template>

<script>
import pagination from '@/components/Pagination';
import { dictsPullList } from '@/api/dictionaries';
import { yardPullList } from '@/api/courtyardAdmin';
import { selectHistoryList } from '@/api/formula';
// import { mapGetters } from 'vuex';
class Page {
  total = 0;
  pageNum = 1;
  pageSize = 30;
}
class Search {
  formulas = '';
  versionNo = '';
}

class Options {
  giftType = {};
  yard = [];
  options = [
    { id: 1, name: '选项一' },
    { id: 2, name: '选项二' },
    { id: 3, name: '选项三' },
    { id: 4, name: '选项四' }
  ];
}
export default {
  components: {
    pagination

  },
  data() {
    return {
      search: new Search(), // 检索条件
      options: new Options(), // 选项
      page: new Page(), // 分页
      list: [], // 列表
      tableHeight: 200
    };
  },
  computed: {
    // ...mapGetters(['permission'])
  },

  mounted() {
    this.getOptions();
    // 初始化表格高度
    this.$nextTick(() => {
      this.initTableHeight();
    });
    window.addEventListener('resize', this.initTableHeight);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.initTableHeight);
  },
  methods: {
    // 初始化表格高度
    initTableHeight() {
      if (!this.$refs.table) {
        this.$nextTick(() => {
          this.initTableHeight();
        });
        return;
      }
      const tableHeight = window.innerHeight - this.$refs.table.$el.getBoundingClientRect().top - 70;
      this.tableHeight = Math.max(tableHeight, 200);
    },
    async getOptions() {
      const { data } = await dictsPullList({
        dicTypes: ['giftCategory']
      });
      this.options.giftType = data.giftCategory;
      const yard = await yardPullList({});
      this.options.yard = yard ? yard.data : [];
      // this.options.giftType = data.giftCategory;
      this.getList();
    },
    async getList() {
      try {
        const { data } = await selectHistoryList({
          pageNum: this.page.pageNum,
          pageSize: this.page.pageSize,
          ...this.search
        });
        // console.log(data);
        this.list = data.list;
        this.page.total = data.total;
      } catch (e) {
        this.page.total = 0;
        this.list = [];
      }
    },

    // 搜索重置
    searchReset() {
      this.search = new Search();
      // this.search.statuss = [0, 1];
      this.getList();
    },
    // 详情跳转
    detailBtn(nameType, row) {
      this.$router.push({
        path: '/archives/formulaHistory/detail',
        query: { nameType: nameType, id: row.id }
      });
    },

    // 确认提示
    hint(status, hintText, row) {
      this.$confirm(`${hintText}, 是否确认?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {

        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  // height: calc(100% - 56px);
  // overflow-y: hidden;
  // height: 85vh;
  ::v-deep img {
    width: 50px;
    border-radius: 4px;
    margin-top: 6px;
  }
}
.content:hover {
  overflow-y: auto;
}
</style>
